<h1 ng-show="vm.listModel.id" translate="LIST.EDIT"></h1>
<h1 ng-show="!vm.listModel.id" translate="LIST.CREATE_NEW"></h1>

<div class="col-md-9 col-centered">
	<form role="form" ng-submit="vm.listModel.id ? vm.updateList() : vm.createList()">
		<table class="table table-striped" cellpadding="15">
			<tr>
				<td style="width: 150px;" class="text-right tdBold alignMiddle" translate="TORRENTS.NAME"></td>
				<td class="text-left">
					<input class="form-control" placeholder="{{ 'TORRENTS.NAME' | translate }}" ng-model="vm.listModel.name" required />
				</td>
			</tr>
			<tr>
				<td class="text-right tdBold" translate="LIST.DESCRIPTION"></td>
				<td class="text-left">
					<textarea class="form-control" ng-model="vm.listModel.description" placeholder="{{ 'LIST.DESCRIPTION' | translate }}" rows="5"></textarea>
				</td>
			</tr>
			<tr>
				<td class="text-right tdBold alignMiddle" translate="LIST.VISIBILITY"></td>
				<td class="text-left">
					<div class="btn-group">
						<label class="btn btn-default" ng-model="vm.listModel.type" uib-btn-radio="'unlisted'"><i class="fa fa-eye-slash" aria-hidden="true"></i> {{ 'LIST.UNLISTED' | translate }}</label>
						<label class="btn btn-default" ng-model="vm.listModel.type" uib-btn-radio="'public'"><i class="fa fa-eye" aria-hidden="true"></i> {{ 'LIST.PUBLIC' | translate }}</label>
					</div>&nbsp;
					<p ng-show="vm.listModel.type == 'unlisted'" style="display: inline-block;"><i translate="LIST.UNLISTED_INFO"></i></p>
					<p ng-show="vm.listModel.type == 'public'" style="display: inline-block;"><i translate="LIST.PUBLIC_INFO"></i></p>
				</td>
			</tr>
			<tr>
				<td class="text-right tdBold alignMiddle" translate="LIST.IMDB_URL"></td>
				<td class="text-left">
					<div class="input-group">
						<input type="text" class="form-control" ng-model="vm.listModel.imdbUrl" placeholder="http://" ng-change="vm.fetchImdbInfo()"/>
						<span class="input-group-btn">
							<input type="text" class="form-control" style="width: 270px;" ng-model="vm.listModel.imdbInfo" readonly />
						</span>
						<span class="input-group-btn" ng-show="vm.listModel.imdbid">
							&nbsp; <button type="button" ng-click="vm.removeImdb()" style="margin-left: 4px;" class="btn btn-default btn-xs" translate="TORRENTS.REMOVE_IMDB"></button>
						</span>
					</div>
				</td>
			</tr>
		</table>
		<br />
		<h2 class="text-center" translate="LIST.LIST_CONTENT"></h2>

		<div class="text-center">
			<button class="btn btn-default" type="button" ng-click="vm.addTorrents()"><i class="fa fa-plus"></i> {{ 'LIST.ADD_TORRENTS' | translate }}</button>
		</div>
		<br />

		<div ng-show="vm.listModel.torrents_data.length == 0" class="alert alert-warning" role="alert" translate="LIST.NO_TORRENTS"></div>
		<div class="table-responsive" ng-show="vm.listModel.torrents_data.length">
			<torrents-table torrents="vm.listModel.torrents_data" on-delete="vm.removeTorrent(torrent);" col-date="true" col-size="true" col-seeders="true" col-leechers="true" col-delete="true"></torrents-table>
		</div>

		<br />

		<div class="text-center">
			<button type="submit" class="btn btn-primary" ng-show="vm.listModel.id" translate="LIST.SAVE"></button>
			<button type="submit" class="btn btn-primary" ng-show="!vm.listModel.id" translate="LIST.CREATE"></button>
		</div>

		<br />

		<uib-alert type="{{ vm.alert.type }}" close="vm.closeAlert()" ng-show="vm.alert != null">
		 	{{ vm.alert.msg }}
		</uib-alert>

	</form>
</div>
